@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Rubik:ital,wght@0,300..900;1,300..900&family=VT323&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --grid-strength: 1px;
  --grid-dash: 0px;
  --grid-gap: 0px;
  --grid-size: 18px;
  --grid-color: #409baf;
  --bg-color: #e6f1fa;
  --bg-color-2: #9eb1d1;
  --sun-color: #f4d9fb;
  --sun-color-2: #fad6fa;
  --sun-edge: #fe44dc;
}

html.dark {
  --grid-color: #d13ac2;
  --bg-color: #082f4d;
  --bg-color-2: #1a2638;
  --sun-color: #c838c1;
  --sun-color-2: #d13ccf;
  --sun-edge: #fff;
}

@keyframes gridLines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0% var(--grid-size);
  }
}

html {
  /*@apply scroll-smooth;*/
  scroll-padding: 1em;
}

body {
  @apply text-base;
  @apply font-sans;
  @apply selection:bg-sky-500;
  @apply selection:text-white;
  background-position: fixed;
  background-color: var(--bg-color-2);
  background-image: radial-gradient(
    circle at 50% 50%,
    var(--bg-color) 0%,
    var(--bg-color-2) 100%
  );
}
html.dark body {
  @apply selection:bg-fuchsia-600;
}
body::before {
  @apply transform-gpu;
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  mix-blend-mode: screen;
  background-size: cover;
  background-image: radial-gradient(
      circle at 50% 40%,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.5)
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 3000 3000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
html.dark body::before {
  @apply transform-gpu;
  mix-blend-mode: overlay;
  background-image: radial-gradient(
      circle at 50% 40%,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.75)
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 3000 3000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
html.dark body::after {
  @apply transform-gpu;
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  mix-blend-mode: lighten;
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3) 25%,
      rgba(0, 0, 0, 1)
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='filter'%3E%3CfeTurbulence baseFrequency='0.15'/%3E%3CfeColorMatrix values='0 0 0 7 -4 0 0 0 7 -4 0 0 0 7 -4 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23filter)'/%3E%3C/svg%3E");
}

#vapor-wave-container {
  @apply transform-gpu;
  position: relative;
  perspective: 150px;
  z-index: 1;
}
#vapor-wave-container::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  animation: gridLines 0.75s linear infinite;
  transform: rotateX(45deg) scaleY(0.5) scaleX(3) translateZ(0) skewX(0)
    skewY(0);
  background-size: var(--grid-dash) var(--grid-dash),
    var(--grid-size) var(--grid-size);
  background-image: linear-gradient(
      to bottom,
      transparent var(--grid-gap),
      var(--bg-color) var(--grid-gap)
    ),
    linear-gradient(
      to right,
      var(--grid-color) var(--grid-strength),
      transparent var(--grid-strength)
    ),
    linear-gradient(
      to right,
      transparent var(--grid-gap),
      var(--bg-color) var(--grid-gap)
    ),
    linear-gradient(
      to bottom,
      var(--grid-color) var(--grid-strength),
      transparent var(--grid-strength)
    );
}

#vapor-wave-container::after {
  @apply transform-gpu;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--sun-color) 42.5%,
    var(--sun-color-2) 45%,
    transparent 100%
  );
  z-index: 1;
}
#vapor-wave-sun {
  @apply transform-gpu;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(750px, 60vw);
  translate: -50% -60%;
  aspect-ratio: 1/1;
  background: radial-gradient(
    circle at 50% 50%,
    var(--sun-color) 0%,
    var(--sun-color) 50%,
    var(--sun-color-2) 52%,
    var(--sun-edge) 53%,
    transparent 53.5%
  );
  z-index: -1;
}

.page-container {
  position: relative;
  overflow: clip;
}
.page-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/img/carpet.webp");
  filter: saturate(3);
  opacity: 0.025;
}
.dark .page-container::before {
  filter: saturate(2);
  opacity: 0.02;
}
.page-section {
  @apply w-[calc(100%-2em)] md:w-[calc(100%-4em)] max-w-5xl mx-auto;
}

.docs-content {
  @apply text-slate-700 dark:text-slate-200 pb-12;
}
.docs-content h2 {
  @apply text-3xl md:text-4xl lg:text-5xl text-cyan-600 font-display mb-6 mt-12 dark:antialiased dark:text-fuchsia-400 first:mt-0;
}
.docs-content h2 + h3 {
  @apply mt-4;
}
.docs-content h3,
.docs-content h4 {
  @apply text-xl lg:text-2xl font-semibold mb-4 mt-8 antialiased text-slate-700 dark:text-white;
}
.docs-content p,
.docs-content li {
  @apply text-base md:text-lg max-w-[750px];
}
.docs-content p {
  @apply mb-4 leading-7;
}
.docs-content p + h2 {
  @apply mt-12;
}

.docs-content code.block {
  @apply text-black text-sm md:text-base dark:text-white bg-blue-50 dark:bg-slate-900 p-3 max-w-2xl;
}
.docs-content code.block .var {
  @apply text-cyan-700 dark:text-pink-500;
}
.docs-content code.block .def {
  @apply text-red-500 dark:text-red-400;
}
.docs-content code.block .fn {
  @apply text-purple-600 dark:text-purple-500;
}
.docs-content code.block .indent {
  @apply inline-block ml-4;
}
.docs-content code.block .comment {
  @apply text-gray-500 dark:text-gray-400;
}

.docs-content p code,
.docs-content li code {
  @apply font-mono text-base;
  @apply text-fuchsia-600 dark:text-fuchsia-400;
  @apply bg-slate-100/50 dark:bg-slate-700;
  @apply px-1.5 py-0.5 rounded;
}
.docs-content a {
  @apply text-cyan-700 hover:text-cyan-800 dark:text-fuchsia-400 dark:hover:text-fuchsia-300 hover:underline hover:underline-offset-1;
}

.docs-content ul:not(.code-example ul) {
  @apply list-disc ml-6 my-8;
}
.docs-content li:not(.code-example li) {
  @apply mb-2;
}

.shiki {
  @apply p-2 lg:p-4 text-sm overflow-auto min-h-[500px] max-h-[500px];
  @apply dark:!bg-[#091e32];
}
[data-full-height="true"] .shiki {
  @apply max-h-none min-h-0 overflow-y-clip overflow-x-auto mb-8 rounded-lg;
}
.twoslash-popup-container {
  flex-basis: 500px;
  overflow: auto;
  max-width: 500px;
}
.dark .twoslash-popup-container {
  background-color: #222427 !important;
}
.twoslash-popup-code {
  text-wrap: wrap;
}
.twoslash-popup-container .line {
  text-wrap: nowrap;
  padding-right: 0.5rem;
}
